<script setup lang="ts">
import dayjs from 'dayjs'
// import { findOrderSum } from '@/api'
// import { lotteryWebsite } from '@/config/lottery-website.js'
import { isEmpty } from 'lodash-es'
import { numberMap } from '@/config/markSixConfig'
import { orderStatus } from '@/config/orderStatus'
import toThousands from '@/utils/formatNumber'
import { computed } from 'vue'
import { useGameStore } from '@/stores/game'
const gameStore = useGameStore()

type Props = {
  data: any
  startTime: string
  endTime: string
  lotteryCode: string
}

const props = defineProps<Props>()

// const showPopover = ref(false)
// const actions = [{ text: '成功投注' }]

// 开奖验证站点
// const currentLotteryWebsite =
//   lotteryWebsite[
//     Object.keys(lotteryWebsite).find((key) => {
//       return key === props.lotteryCode
//     })
//   ]

// 开奖号码
const rewardNumbers = isEmpty(props.data?.rewardNumber) ? [] : props.data.rewardNumber.split(',')

const gameList = computed(() => gameStore?.gameList)
const lotteryCodeLabel = computed(() => {
  return (gameList?.value || []).find((value) => value.lotteryCode === props.lotteryCode)?.lotteryName
})

// const openCurrentLotteryWebsite = () => window.open(`https://${currentLotteryWebsite}`)

const periodsNumber = props.data.periodsNumber

// 投注记录列表
const orderRes: any[] = props.data?.orderRes ?? []

// 待开奖
const isOnWaitingLottery = isEmpty(rewardNumbers)
// 是否显示开奖验证跳转按钮
// const showLotteryWebsite = isEmpty(!currentLotteryWebsite) && !isOnWaitingLottery

const getBallColorClassName = (num: string) => {
  if (props.lotteryCode !== 'XGLHC') return ''
  num = Number(num)
  if (num < 10) {
    num = '0' + num
  }
  return numberMap[num]?.color
}

const getOrderStatusColor = (orderCode: number) => {
  return orderStatus.find((value) => value.value === orderCode)?.color
}

const getOrderStatusText = (orderCode: number) => {
  return orderStatus.find((value) => value.value === orderCode)?.text
}
// const fetchOrderSum = async () => {
//   const params = {
//     periodsNumber: props.data.periodsNumber,
//     startTime: props.startTime,
//     endTime: props.endTime,
//   }
//
//   const data = await findOrderSum(params)
// }

// fetchOrderSum()
</script>

<template>
  <div class="record-item">
    <div class="info">
      <div class="row issue">
        <div class="left">{{ lotteryCodeLabel }} - 第 {{ periodsNumber }}期</div>

        <!--        <div class="right lottery" style="flex: 1.5" v-if="!isOnWaitingLottery">-->
        <!--          {{ currentLotteryWebsite }}-->
        <!--        </div>-->

        <div class="right" v-if="isOnWaitingLottery">
          <!--          开奖号码：-->
          <span
            style="
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 70%;
              color: rgba(255, 132, 162, 1);
            "
          >
            待开奖
          </span>
        </div>
        <div class="right" v-else>
          <div class="number-box">
            <!--            开奖号码：-->
            <span :class="`ball ${getBallColorClassName(item)}`" v-for="item in rewardNumbers" :key="item">
              {{ item }}
            </span>
          </div>

          <!--          <div v-if="showLotteryWebsite">-->
          <!--            <span class="verification" @click="openCurrentLotteryWebsite">开奖验证</span>-->
          <!--          </div>-->
        </div>
      </div>
      <!-- <div class="row lottery" v-if="!isOnWaitingLottery">
        <div class="left">
          开奖号码：
          <span :class="`ball ${getBallColorClassName(item)}`" v-for="item in rewardNumbers" :key="item">
            {{ item }}
          </span>
        </div>
        <div class="right" v-if="showLotteryWebsite">
          <span class="verification" @click="openCurrentLotteryWebsite">开奖验证</span>
        </div>
      </div> -->
    </div>

    <div class="table">
      <table>
        <tr class="table-head">
          <!-- <th>序号</th> -->
          <th style="width: 1.4rem">投注时间</th>
          <th style="width: 1.4rem">玩法</th>
          <th>投注金额</th>
          <th>状态</th>
          <th>派奖金额</th>
          <th>返水</th>
        </tr>
        <tr class="table-row" v-for="(item, index) in orderRes" :key="index">
          <!-- <td>{{ index + 1 }}</td> -->
          <td>{{ dayjs(item.orderDate).format('YYYY-MM-DD HH:mm:ss') }}</td>
          <td>{{ item.betContent }}</td>
          <td>{{ toThousands(item.totalAmount) }}</td>
          <td :style="{ color: getOrderStatusColor(item.orderStatus) }">
            {{ getOrderStatusText(item.orderStatus) }}
          </td>
          <td>{{ toThousands(item.rewardAmount) }}</td>
          <td>{{ toThousands(item.returnAmount) }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style scoped lang="less">
.record-item {
  width: 100%;
  display: flex;
  color: black;
  overflow: hidden;
  flex-direction: column;
  border-radius: 5px;
  // background-color: white;

  .doubt {
    font-style: unset;
    background: linear-gradient(160.11deg, #4bb3e2 0%, #3891ee 121.97%), linear-gradient(0deg, #ffffff, #ffffff);
    color: white;
    width: 16px;
    height: 16px;
    position: absolute;
    margin-left: 5px;
    border-radius: 100px;
    text-align: center;
    line-height: 16px;
    margin-top: -2px;
  }

  .row {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .info {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    gap: 4px;
    background: rgba(101, 90, 227, 1);
    color: #fff;

    .left {
      flex: 2;
      text-align: left;
    }
    .right {
      flex: 2;
      display: flex;
      align-items: center;
    }

    .right {
      justify-content: flex-end;
    }

    .issue {
    }

    .lottery {
      .left {
        display: flex;
        align-items: center;
        flex: 4;
        gap: 2px;
      }
    }
  }

  .verification {
    background: linear-gradient(180deg, #82b5ff 0%, #5d9efd 100%);
    color: white;
    width: 73px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: center;
    border-radius: 100px;
    line-height: 1;
  }

  .table {
    display: flex;
    width: 100%;

    th,
    td,
    tr,
    table {
      border: 0;
      padding: 0;
      margin: 0;
      border-spacing: 0;
      font-weight: 400;
      flex-shrink: 0;
    }

    table {
      border-collapse: separate;
      border-spacing: 0 3px;
      padding: 0 3px;
    }

    table {
      width: 100%;

      .table-head {
        height: 26px;
      }

      .table-row {
        position: relative;
        z-index: 1;
        color: rgba(189, 196, 255, 1);
        font-size: 11px;

        td {
          padding: 6.5px 0;
        }

        &:after {
          content: '';
          position: absolute;
          width: 100%;
          height: calc(100% - 1px);
          left: -1px;
          z-index: -1;
          border-radius: 5px;
          background: linear-gradient(0deg, #2a2c5d, #2a2c5d);
          border: 1px solid rgba(59, 61, 110, 1);
        }
      }

      th {
        color: rgba(181, 188, 255, 1);
        font-size: 11px;
      }

      td {
      }
    }
  }

  .statistics {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 5px 0;

    .block {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      justify-items: flex-end;
      flex: 1;
      gap: 5px;

      span {
        &:first-child {
          color: #896adb;
        }

        &:last-child {
          color: #8e99be;
        }

        &.red {
          color: #e15375;
        }
      }
    }
  }
}

.number-box {
  display: flex;
}

.ball {
  display: block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 100px;
  flex-shrink: 0;
  font-size: 12px;
  color: #4d3eff;
  //border: 1px solid #fe5c73;
  background-color: #fff;
  margin-right: 4px;
}

.red {
  color: #ff3e3e;
  border: 1px solid #ff3e3e;
  border-radius: 50%;
}

.red-animal {
  color: #ff3e3e;
}

.blue-animal {
  color: rgba(49, 31, 255, 1);
}

.green-animal {
  color: #11b548;
}

.red-bg {
  background: #ff3e3e;
  color: white;
}

.blue {
  color: rgba(49, 31, 255, 1);
  border: 1px solid rgba(49, 31, 255, 1);
  border-radius: 50%;
}

.blue-bg {
  background: rgba(49, 31, 255, 1);
  color: white;
}

.green {
  color: #11b548;
  border: 1px solid #11b548;
  border-radius: 50%;
}

.green-bg {
  background: #11b548;
  color: white;
}

.win-number {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
</style>
